<!--
 * @Description: 项目级成本计划信息初始化
 * @Author: wind-lc
 * @version: 1.0
 * @Date: 2024-03-01 16:17:15
 * @LastEditTime: 2024-03-29 13:05:53
 * @FilePath: \cscec-pms-admin\src\views\businessAffairs\businessCostPlanManagement\costPlanManagement\costPlan\components\InformationInit\index.vue
-->
<template>
  <a-spin
    :spinning="spinning"
    :class="{'bg': isAudit}"
  >
    <nav class="nav-wrapper">
      <a-steps :current="current">
        <a-step>
                <template slot="title">
                  <a-tooltip>
                    <template slot="title">
                      1.选择项目业态；2.完善临时科目，完成项目级成本科目初始化
                    </template>
                    项目级成本科目初始化
                  </a-tooltip>
                </template>
              </a-step>
              <a-step>
                <template slot="title">
                  <a-tooltip>
                    <template slot="title">
                      进行标准成本、总目标成本数据填写
                    </template>
                    填报总目标成本数据
                  </a-tooltip>
                </template>
              </a-step>
              <a-step>
                <template slot="title">
                  <a-tooltip>
                    <template slot="title">
                      进行目标成本分解数据填写
                    </template>
                    分解目标成本数据
                  </a-tooltip>
                </template>
              </a-step>
              <a-step>
                <template slot="title">
                  <a-tooltip>
                    <template slot="title">
                      分公司、公司领导进行审核
                    </template>
                    {{status | titleFilter}}
                  </a-tooltip>
                </template>
              </a-step>
        <!-- <a-step
          title=""
          description=""
        />
        <a-step
          title=""
          description=""
        />
        <a-step
          title="分解目标成本数据"
          description=""
        />
        <a-step
          :title="status | titleFilter"
          description=""
        >
          <div
            v-if="status === 2"
            class="nav-step-check"
            slot="icon"
          >
            <a-icon type="check" />
          </div>
        </a-step> -->
      </a-steps>
      <template v-if="!isAudit">
        <a-button
          v-show="current > 0 && current !== 3"
          type="primary"
          :disabled="notProjectId"
          @click="handCurrent"
        >上一步</a-button>
        <a-button
          v-show="current < 2"
          type="primary"
          :disabled="notProjectId"
          @click="handleNext"
        >下一步</a-button>
        <a-button
          v-show="current === 2"
          type="primary"
          :disabled="notProjectId"
          @click="handleNext"
        >提交</a-button>
        <a-button
          v-show="current === 3"
          :disabled="notProjectId"
          @click="handleNext"
        >审批信息</a-button>
      </template>
    </nav>
    <CostAccountInit
      v-if="current === 0"
      ref="costAccountInit"
      :spinning.sync="spinning"
      class="page-wrapper"
      :isAudit="isAudit"
    />
    <FillingInData
      v-if="current === 1"
      ref="fillingInData"
      :spinning.sync="spinning"
      class="page-wrapper"
      :isAudit="isAudit"
    />
    <DecompositionData
      v-if="current === 2"
      ref="decompositionData"
      :spinning.sync="spinning"
      class="page-wrapper"
      @submitApproval="submitApproval"
      :isAudit="isAudit"
    />
    <Approving
      v-if="current === 3"
      ref="approving"
      :spinning.sync="spinning"
      class="page-wrapper"
      :isAudit="isAudit"
      :pId="projectId"
    />
    <ErrorTable
      :visible.sync="visible"
      :errorData="errorData"
    ></ErrorTable>
  </a-spin>
</template>
<script>
import CostAccountInit from './components/CostAccountInit'
import FillingInData from './components/FillingInData'
import DecompositionData from './components/DecompositionData'
import Approving from './components/Approving'
import ErrorTable from '../ErrorTable'
import { queryPlanStatus, queryById } from '@/api/businessAffairs/costAccountInit'
export default {
  name: 'InformationInit',
  components: {
    CostAccountInit,
    FillingInData,
    DecompositionData,
    Approving,
    ErrorTable
  },
  props: {
    // 是否作为审批详情
    isAudit: {
      type: Boolean,
      default: false
    },
    // 是否初次
    isInit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      // 项目id
      projectId: this.$userInfo()?.currentPost?.projectId,
      // 当前进度
      current: -1,
      // 状态 0草稿，1审批中，2审批通过，3审批不通过
      status: 0,
      // 加载中
      spinning: false,
      visible: false,
      errorData: []
    }
  },
  filters: {
    titleFilter(key) {
      const txt = ['审核', '审核中', '审核通过', '审核不通过']
      return txt[key]
    }
  },
  computed: {
    // 没有项目id
    notProjectId() {
      return (this.projectId ?? '') === ''
    }
  },
  async created() {
    if (this.isAudit) {
      this.current = 3
      const res = await queryById(this.$route.query.id)
      this.projectId = res.data.projectId
      this.getStatus()
      this.$nextTick(() => {
        this.$refs.approving.getTableData()
      })
    } else {
      // 监听父组件广播beforeDestroy时需要removeEventListener
      window.addEventListener('message', this.init, false)
    }
  },
  methods: {
    /**
     * @description: 初始化
     * @param {Event} e
     * @return {void}
     */
    init(e) {
      // 验证是否同源，避免第三方攻击
      const fromOrigin = e.origin || e.originalEvent.origin
      if (fromOrigin === window.location.origin) {
        if (e.data?.name === 'init') {
          if (e.data.key === '1') {
            this.getStatus()
          }
        }
      }
    },
    /**
     * @description: 获取状态
     * @return {void}
     */
    async getStatus() {
      // 不在会走这个判断
      // if (this.notProjectId) {
      //   this.$message.warning('请选择项目部岗位！')
      //   return
      // }
      this.spinning = true
      queryPlanStatus(this.projectId).then((res) => {
        if (res.code === '0') {
          this.status = res.data
          this.current = [1, 2].includes(res.data) ? 3 : 0
          if (res.data === 2 && this.isInit) {
            this.$emit('approve', true)
            this.spinning = false
            return
          }
        } else {
          this.current = 0
        }
        this.$nextTick(() => {
          // 调用组件getTableData
          switch (this.current) {
            case 0:
              this.$refs.costAccountInit.getTableData()
              break
            case 1:
              this.$refs.fillingInData.getTableData()
              break
            case 2:
              this.$refs.decompositionData.getTableData()
              break
            case 3:
              this.$refs.approving.getTableData()
              break
          }
        })
      })
    },
    /**
     * @description: 下一步
     * @return {void}
     */
    handleNext() {
      switch (this.current) {
        case 0:
          if (!this.$refs.costAccountInit.form?.type) {
            this.visible = true
            this.errorData = [{ message: '请先选择项目业态' }]
            return
          }
          this.current++
          break
        case 1:
          this.$refs.fillingInData
            .handleSubmit(1)
            .then((res) => {
              this.current++
            })
            .catch((err) => {
              console.log(err)
              if (Array.isArray(err)) {
                this.visible = true
                this.errorData = err.map((el, index) => {
                  el.key = index + ''
                  return el
                })
              }
            })
          break
        case 2:
          this.$refs.decompositionData.handleSubmit()
            .then((res) => {
              // this.current++
            })
            .catch((err) => {
              console.log(err)
              if (Array.isArray(err)) {
                this.visible = true
                this.errorData = err.map((el, index) => {
                  el.key = index + ''
                  return el
                })
              }
            })
          break
        case 3:
          this.$refs.approving.showApprovalDetails()
          break
      }
    },
    handCurrent() {
      if (this.current == 1) {
        this.$refs.fillingInData?.handleSubmit(0).then((res) => {})
      }
      this.current--
    },
    /**
     * @description: 提交选择审批人之后
     * @param {boolean} val true确认审批，否则取消
     * @return {promise}
     */
    submitApproval(val) {
      if (val) {
        this.current++
        queryPlanStatus(this.projectId).then((res) => {
          if (res.code === '0') {
            this.status = res.data
          }
        })
      } else {
        this.$refs.decompositionData.getTableData()
      }
    }
  },
  beforeDestroy() {
    window.removeEventListener('message', this.init)
  }
}
</script>
<style lang="less" scoped>
@deep: ~'>>>';
.nav-wrapper {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #e8e8e8;
  // margin-bottom: 16px;
  .ant-btn {
    margin-left: 16px;
  }
  @{deep} .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title,
  @{deep} .ant-steps-item-finish > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description,
  @{deep} .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-title,
  @{deep} .ant-steps-item-process > .ant-steps-item-container > .ant-steps-item-content > .ant-steps-item-description {
    color: #1890ff !important;
  }
  @{deep} .ant-steps-item-description {
    max-width: 200px;
  }
}
.page-wrapper {
  height: calc(100% - 65px);
}
@{deep} .table-wrapper .plTableBox {
  .el-table td {
    padding:  0;
  }
  .el-table th {
    padding: 0;
    height: 35px;
  }
}
@{deep} .table-wrapper .elx-grid .elx-header--row th,
@{deep} .table-wrapper .elx-table .elx-body--column.col--ellipsis,
.elx-table .elx-footer--column.col--ellipsis,
.elx-table .elx-header--column.col--ellipsis,
.elx-table.elx-editable .elx-body--column {
  padding:  0;
  height: 35px;
}
@{deep} .table-wrapper .el-table td p,
@{deep} .table-wrapper .elx-table td p {
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
}
.nav-step-check {
  width: 32px;
  height: 32px;
  border: 1px solid #1890ff;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
  color: #1890ff;
}
.bg {
  background: #fff;
}
</style>
